<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/9/22
  Time: 10:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>异步上传</title>
    <script src="/js/jquery-2.1.1.min.js"></script>
    <script src="/js/jquery.form.js"></script>
    <script>
        $(function () {
                //表单的异步提交
            $("#btn").click(function () {
                //异步提交表单
                $("#ajaxForm").ajaxSubmit({
                    url:"/fileUploadFour",
                    type:"post",
                    success:function (data) {
                        //把表单中的图片提交到后台，再返回前端的img中
                        $("#header").attr("src",data)
                    }
                })
            })
        })
    </script>
</head>
<body>
<h3>图片上传</h3>
<form id="ajaxForm" enctype="multipart/form-data">
    <input type="file" name="file">
    <%--异步上传，这里不可以是submit，因为不是整个表单提交，只是提交文件（图片等）
        否则会刷新页面--%>
    <input type="button" id="btn" value="上传">
</form>
<img src="/" alt="" width="100px" id="header">
</body>
</html>
